
<style type="scss">
    .swiper{
        height: auto;
        overflow: hidden;
    }
    .slider-contanier{
        
    }
    .slider{
        float: left;
    }
    .scrollbar-slider{
        width: 10px;
        height: 10px;
        margin-bottom: 10px;
        background: red;
    }
    .animation{
        transition:all 2s cubic-bezier(.25, .1, .25, 1) ;
    }
</style>
<template>
  <div>
        <ul>
            <li v-for="(item , index) in tabsList" :key="index" @click="clickNav(item.to)">{{item.text}}</li>
        </ul>
        <div class="swiper" ref="swiper" :style="'width:'+ slideWidth+'px'" >
            <ul class="slider-contanier clearfix animation" ref="sliderContanier" :style="'width:'+ sliderContanierWidth +'px;transform:translateX(' + translateX + 'px)'">
                <li class="page slider" v-for="item in tabsList" :key="item.to" :name="item.text" :style="'width:'+ slideWidth+'px'">
                    <component :is="item.component" v-if="item.is"></component>
                </li>
            </ul>
            <ul class="scrollbar">
                <li class="scrollbar-slider" v-for="(item,index) in tabsList" :key="item.to" @click="scrollbarClick($event,index)"></li>
            </ul>
        </div>
  </div>
</template>

<script>
import Swiper from 'swiper' ;
import router from "./../router/index";
import Swiperss from "./../common/utils";
export default {
    data(){
        const { name } = this.$route.params || {};
        return {
            tabsList:this.tabs.map( tab => {
                if( tab.to === name ){
                    tab.active = true;
                    tab.is = true;
                }
                return tab;
            }),
            slideWidth:window.innerWidth  ,
            sliderContanierWidth : window.innerWidth * this.tabs.length  ,
            translateX : 0 ,
            touchstartX : 0 ,
            touchDirection : '' ,
            currentIndex : 0 ,
        }
    },
    props:{
        tabs:{
            type:Array ,
            value:[]
        },
        //回调函数，返回当前页面的索引以及swipper对象等信息
        ontabs:{
            type :Function,
            value:()=>{}
        },
    },
    mounted(){
        this.initSwiper() ;
        let obj = new Swiperss(this.$refs.swiper,{
            activeIndex : 1 ,
            playDirection :'right',
        });
        console.log(obj)
        obj.transitionEnd(() =>{
            console.log('运动结束')
        })
    },
    watch: {
        '$route'({params}){
            this.tabsList.forEach((item,index) => {
                if ( item.to === params.name ) {
                    item.is = true;
                    item.active = true;
                    // this.mySwiper.slideTo( index, 500, false) ;
                    this.ontabs({
                        swiper : this.mySwiper,
                        cureent:item
                    })
                } else {
                    item.active = false;
                }
            })
        }
    },
    methods:{
        initSwiper() {
            // this.mySwiper = new Swiper(this.$refs.swiper, {
            //     scrollbar: '.swiper-scrollbar',
            //     scrollbarHide: false,
            //     scrollbarDraggable: true,
            //     scrollbarSnapOnRelease: true,
            //     initialSlide: this.tabsList.findIndex( tab => tab.active )
            // });
            let _this = this;
            this.$refs.sliderContanier.addEventListener('webkitTransitionEnd',()=>{
                router.push({path: '/tabs/' + _this.tabsList[_this.currentIndex].to})
            })
        },
        clickNav(name) {
            router.push({path: '/tabs/' + name})
        },
        touchstart(event){
            let { clientX } = event.targetTouches[0]
            this.touchstartX = clientX;

        },
        touchmove(event){
            let { clientX } = event.targetTouches[0]
            this.getDirection(clientX)
        },
        touchend(){
            this.runAnimation()
        },
        getDirection(pageX){
            let diff = pageX - this.touchstartX;
            if(diff > 0){
                this.touchDirection = 'left' ; //从左往右做滑动
            }else{
                 this.touchDirection = 'right' //从右往左做滑动
            }
        },
        runAnimation(Direction){
            let currentPage = Math.abs(this.translateX) / this.slideWidth + 1 ,
                totalPage = this.tabs.length ;
            if(this.touchDirection == 'left'){
                if(currentPage <= 1) return ;
                this.translateX = ~~this.translateX + ~~this.slideWidth ;
                currentPage = currentPage-1
            }
            else if(this.touchDirection == 'right'){
                if(currentPage >= totalPage) return ;
                this.translateX = ~~this.translateX - ~~this.slideWidth ;
                currentPage = currentPage+1
            }
            this.currentIndex = currentPage - 1 ;
            console.log(this.currentIndex)
        },
        scrollbarClick(e,index){
            this.translateX = -this.slideWidth * index 
        }
    }
}
</script>
